<template>
  <div class="page changeSettlementAccount new-form-list">
    <mt-actionsheet :actions="actions" v-model="chooseImgVisible">
    </mt-actionsheet>

    <awesome-picker
      ref="settleAccountsType"
      :textTitle="settleAccountsType.textTitle"
      :data="getAwesomeData(settleAccountsType.data)"
      :anchor="settleAccountsType.anchor"
      @confirm="
        v => handleConfirm('settleAccountsType', v, settleAccountsType.data)
      "
    >
    </awesome-picker>
    <awesome-picker
      ref="accountType"
      :textTitle="accountType.textTitle"
      :data="getAwesomeData(accountType.data)"
      :anchor="accountType.anchor"
      @confirm="v => handleConfirm('accountType', v, accountType.data)"
    >
    </awesome-picker>

    <hlwsk
      v-if="hlwskProtocol"
      @cancel="
        flag => {
          this.hlwskProtocol = flag;
        }
      "
    />
    <ydzfsd
      v-if="ydzfsdProtocol"
      @cancel="
        flag => {
          this.ydzfsdProtocol = flag;
        }
      "
    />
    <div v-show="!hlwskProtocol && !ydzfsdProtocol" class="scroll-view">
      <customHeader
        middleTitle="变更结算账号"
        rightTitle=""
        @leftCallBack="handleBack"
      />
      <StoreDetails
        :sourceData="shopListData"
        ref="StoreDetails"
      ></StoreDetails>
      <div
        class="tip-msg"
        v-if="shopList.length > 1"
        :tipMsg="tipMsg"
        @click="showStoreList"
      >
        <i class="zhk-order_fa"></i>
        <span
          >多门店共用商户号，变更成功后，结算账号将同步修改
          <i>查看全部门店</i></span
        >
      </div>
      <div class="page-body">
        <div class="form-wrapper">
          <div class="form-item border-bt-left">
            <div class="label">账户类型</div>
            <div
              v-if="
                sumbitData.channelType == 8 && formData.merchantType != '01'
              "
              class="flex-center"
            >
              <div class="pick-value" @click="showPicker('accountType')">
                {{
                  this.formData.accountType
                    ? showIdName(accountType.data, this.formData.accountType)
                    : accountType.tip
                }}
              </div>
              <i class="zhk-list_rarrow"></i>
            </div>
            <div v-else class="pick-value">
              {{ showIdName(accountType.data, this.formData.accountType) }}
            </div>
          </div>
          <div
            v-show="
              formData.accountType == '01' && formData.merchantType != '01'
            "
            class="form-item border-bt-left"
          >
            <div class="label">结算账户</div>
            <div v-if="sumbitData.channelType == 8" class="flex-center">
              <div class="pick-value" @click="showPicker('settleAccountsType')">
                {{
                  this.formData.settleAccountsType
                    ? showIdName(
                        settleAccountsType.data,
                        this.formData.settleAccountsType
                      )
                    : settleAccountsType.tip
                }}
              </div>
              <i class="zhk-list_rarrow"></i>
            </div>
            <div v-else class="pick-value">
              {{
                showIdName(
                  settleAccountsType.data,
                  this.formData.settleAccountsType
                )
              }}
            </div>
          </div>
          <div
            class="border-bt-all"
            v-if="
              (formData.merchantType == '03' && formData.accountType == '01') ||
                formData.accountType == '02'
            "
          >
            <div class="form-title ">
              对公账户信息
            </div>
          </div>
          <div
            v-if="
              formData.merchantType == '03' ||
                (formData.merchantType == '02' && formData.accountType == '02')
            "
            class="store-head"
          >
            <div class="tt">公户凭证</div>
            <div class="store-head-explain">
              如开户许可证、银行电子回执单、银行印鉴卡等，需要体现对公户信息及银行签章
            </div>
            <div class="ct border-bt">
              <div
                class="store-head-box border-dashed"
                v-if="!formData.yzIndustryLicensePhoto"
                @click="chooseImg('yzIndustryLicensePhoto')"
              >
                <span class="zhk-sczp" />
              </div>
              <div
                class="store-head-box border-solid"
                v-else-if="formData.yzIndustryLicensePhoto"
              >
                <img
                  :src="repeatImgUrl(formData.yzIndustryLicensePhoto, 'resize')"
                  alt=""
                  @click="showImg(formData.yzIndustryLicensePhoto)"
                />
                <span
                  class="zhk-sbylx"
                  @click="delImage('yzIndustryLicensePhoto')"
                ></span>
              </div>
            </div>
          </div>
          <div
            v-if="formData.merchantType == '03' && formData.accountType == '01'"
          >
            <div
              class="form-item border-bt-left"
              v-if="formData.reserveBankCertName"
            >
              <div class="label">公户开户名</div>
              <div class="pick-value">{{ formData.reserveBankCertName }}</div>
            </div>
            <mt-field
              v-if="!formData.reserveBankCertName"
              class="border-bt-left"
              label="公户开户名"
              placeholder="请填写公户开户名"
              v-model="formData.reserveBankCertName"
              :attr="{ maxlength: 64 }"
            ></mt-field>
            <mt-field
              class="border-bt-left"
              label="公户银行账号"
              placeholder="请填写公户银行账号"
              v-model="formData.reserveBankCardNo"
              :attr="{ maxlength: 28 }"
            ></mt-field>
            <div class="form-item border-bt-left">
              <div class="label">公户开户行所在地区</div>
              <div class="pick-value" @click="showPicker('reserveBranch')">
                {{
                  reserveBranchAreaName
                    ? reserveBranchAreaName
                    : reserveBranch.tip
                }}
              </div>
              <i class="zhk-list_rarrow"></i>
              <awesome-picker
                ref="reserveBranch"
                :textTitle="reserveBranch.textTitle"
                :data="reserveBranch.data"
                :anchor="reserveBranch.anchor"
                @confirm="
                  v => handleConfirm('reserveBranch', v, reserveBranch.data)
                "
              >
              </awesome-picker>
            </div>
            <div class="form-item border-bt-left">
              <div class="label">公户开户银行</div>
              <div class="pick-value" @click="showPicker('reserveBank')">
                {{
                  formData.reserveBankCode
                    ? formData.reserveBankCode
                    : reserveBank.tip
                }}
              </div>
              <i class="zhk-list_rarrow"></i>
              <awesome-picker
                v-if="reserveBankItemVisible"
                ref="reserveBank"
                :textTitle="reserveBank.textTitle"
                :data="reserveBank.data"
                :anchor="reserveBank.anchor"
                @confirm="
                  v => handleConfirm('reserveBank', v, reserveBank.data)
                "
              >
              </awesome-picker>
            </div>
            <div class="form-item border-bt-left">
              <div class="label">公户开户行支行名称</div>
              <div class="pick-value" @click="showPicker('reserveBranchName')">
                {{
                  formData.reserveBranchName
                    ? formData.reserveBranchName
                    : bank.tip
                }}
              </div>
              <i class="zhk-list_rarrow"></i>
              <awesome-picker
                v-if="reserveBranchItemVisible"
                ref="reserveBranchName"
                :textTitle="reserveBranchName.textTitle"
                :data="reserveBranchName.data"
                :anchor="reserveBranchName.anchor"
                @confirm="
                  v =>
                    handleConfirm(
                      'reserveBranchName',
                      v,
                      reserveBranchName.data
                    )
                "
              >
              </awesome-picker>
            </div>
            <mt-field
              class="border-bt-left"
              label="公户联行号"
              placeholder="请填写联行号"
              v-model="formData.reserveContactLine"
              :attr="{ maxlength: 12 }"
            ></mt-field>
          </div>

          <div class="border-bt-all" v-if="formData.accountType != '02'">
            <div class="form-title ">
              结算账户信息
            </div>
            <div class="hint-info">
              <span class="zhk-ts"></span>
              <span class="info"
                >以下信息非常重要，请仔细确认，任何一项信息有误都会导致结算款不到账</span
              >
            </div>
          </div>
          <div v-if="formData.settleAccountsType == '2'" class="store-head">
            <div class="tt">非法人结算证明照片</div>
            <div class="ct border-bt">
              <div
                class="store-head-box border-dashed"
                v-show="!formData.yzImgUnincorporated"
                @click="chooseImg('yzImgUnincorporated')"
              >
                <span class="zhk-sczp" />
              </div>
              <div
                class="store-head-box border-solid"
                v-show="formData.yzImgUnincorporated"
              >
                <img
                  :src="repeatImgUrl(formData.yzImgUnincorporated, 'resize')"
                  alt=""
                  @click="showImg(formData.yzImgUnincorporated)"
                />
                <span
                  class="zhk-sbylx"
                  @click="delImage('yzImgUnincorporated')"
                ></span>
              </div>
            </div>
          </div>
          <div
            v-show="
              formData.accountType != '02' || formData.merchantType == '01'
            "
            class="store-head"
          >
            <div class="tt">银行卡照片</div>
            <div class="ct border-bt">
              <div
                class="store-head-box border-dashed"
                v-show="!formData.yzImgBankcardA"
                @click="chooseImg('yzImgBankcardA', 'baidu_ocr_bankcard')"
              >
                <span class="zhk-sczp" />
              </div>
              <div
                class="store-head-box border-solid"
                v-show="formData.yzImgBankcardA"
              >
                <img
                  :src="repeatImgUrl(formData.yzImgBankcardA, 'resize')"
                  alt=""
                  @click="showImg(formData.yzImgBankcardA)"
                />
                <span
                  class="zhk-sbylx"
                  @click="delImage('yzImgBankcardA')"
                ></span>
              </div>
            </div>
          </div>
          <div
            v-if="formData.settleAccountsType != '2'"
            class="form-item border-bt-left"
          >
            <div class="label">
              {{ formData.accountType == "02" ? "公户" : "" }}开户名
            </div>
            <div class="pick-value">{{ formData.bankCertName }}</div>
          </div>
          <mt-field
            class="border-bt-left"
            :label="`${formData.accountType == '02' ? '公户' : ''}银行账号`"
            placeholder="请填写银行账号"
            v-model="formData.bankCardNo"
            :attr="{ maxlength: 28 }"
          ></mt-field>
          <div class="form-item border-bt-left">
            <div class="label">
              {{ formData.accountType == "02" ? "公户" : "" }}开户行所在地区
            </div>
            <div class="pick-value" @click="showPicker('branch')">
              {{ branchAreaName ? branchAreaName : branch.tip }}
            </div>
            <i class="zhk-list_rarrow"></i>
            <awesome-picker
              ref="branch"
              :textTitle="branch.textTitle"
              :data="branch.data"
              :anchor="branch.anchor"
              @confirm="v => handleConfirm('branch', v, branch.data)"
            >
            </awesome-picker>
          </div>
          <div class="form-item border-bt-left">
            <div class="label">
              {{ formData.accountType == "02" ? "公户" : "" }}开户银行
            </div>
            <div class="pick-value" @click="showPicker('bank')">
              {{ formData.bankCode ? formData.bankCode : bank.tip }}
            </div>
            <i class="zhk-list_rarrow"></i>
            <awesome-picker
              v-if="bankItemVisible"
              ref="bank"
              :textTitle="bank.textTitle"
              :data="bank.data"
              :anchor="bank.anchor"
              @confirm="v => handleConfirm('bank', v, bank.data)"
            >
            </awesome-picker>
          </div>
          <div class="form-item border-bt-left">
            <div class="label">
              {{ formData.accountType == "02" ? "公户开户行" : "" }}支行名称
            </div>
            <div class="pick-value" @click="showPicker('branchName')">
              {{ formData.branchName ? formData.branchName : bank.tip }}
            </div>
            <i class="zhk-list_rarrow"></i>
            <awesome-picker
              v-if="branchItemVisible"
              ref="branchName"
              :textTitle="branchName.textTitle"
              :data="branchName.data"
              :anchor="branchName.anchor"
              @confirm="v => handleConfirm('branchName', v, branchName.data)"
            >
            </awesome-picker>
          </div>
          <mt-field
            class="border-bt-left"
            label="联行号"
            placeholder="请填写联行号"
            v-model="formData.contactLine"
            :attr="{ maxlength: 12 }"
          ></mt-field>
          <div v-show="formData.settleAccountsType == '2'">
            <div class="store-head">
              <div class="tt">身份证照片（正面）</div>
              <div class="ct border-bt">
                <div
                  class="store-head-box border-dashed"
                  v-show="!formData.yzImgPrivateIdcardA"
                  @click="
                    chooseImg(
                      'yzImgPrivateIdcardA',
                      'baidu_ocr_bank_idcard_front'
                    )
                  "
                >
                  <img
                    class="imgOpcity"
                    :src="require('../../assets/images/up_bg_sa.png')"
                  />
                  <span class="zhk-sczp" />
                </div>
                <div
                  class="store-head-box border-solid"
                  v-show="formData.yzImgPrivateIdcardA"
                >
                  <img
                    :src="repeatImgUrl(formData.yzImgPrivateIdcardA, 'resize')"
                    alt=""
                    @click="showImg(formData.yzImgPrivateIdcardA)"
                  />
                  <span
                    class="zhk-sbylx"
                    @click="delImage('yzImgPrivateIdcardA')"
                  ></span>
                </div>
              </div>
            </div>
            <div class="store-head">
              <div class="tt">身份证照片（反面）</div>
              <div class="ct border-bt">
                <div
                  class="store-head-box border-dashed"
                  v-show="!formData.yzImgPrivateIdcardB"
                  @click="
                    chooseImg(
                      'yzImgPrivateIdcardB',
                      'baidu_ocr_bank_idcard_back'
                    )
                  "
                >
                  <img
                    class="imgOpcity"
                    :src="require('../../assets/images/up_bg_sb.png')"
                  />
                  <span class="zhk-sczp" />
                </div>
                <div
                  class="store-head-box border-solid"
                  v-show="formData.yzImgPrivateIdcardB"
                >
                  <img
                    :src="repeatImgUrl(formData.yzImgPrivateIdcardB, 'resize')"
                    alt=""
                    @click="showImg(formData.yzImgPrivateIdcardB)"
                  />
                  <span
                    class="zhk-sbylx"
                    @click="delImage('yzImgPrivateIdcardB')"
                  ></span>
                </div>
              </div>
            </div>
            <mt-field
              v-if="formData.settleAccountsType == '2'"
              class="border-bt-left"
              label="开户名"
              placeholder="收款银行账号的开户人名称"
              v-model="formData.bankCertName"
              :attr="{ maxlength: 64 }"
            ></mt-field>
            <mt-field
              class="border-bt-left"
              label="身份证号码"
              placeholder="请填写负责人身份证号码"
              v-model="formData.certNo"
              :attr="{ maxlength: 18 }"
            ></mt-field>
            <div class="form-item border-bt-left">
              <div class="label">身份证有效期</div>
              <div
                class="pick-value"
                @click="showPeriod('merchantIdExpireStart')"
              >
                {{
                  this.formData.merchantIdExpireStart &&
                  this.formData.merchantIdExpire
                    ? this.formData.merchantIdExpireStart +
                      " 至 " +
                      (this.formData.merchantIdExpire == "29991231"
                        ? "长期"
                        : this.formData.merchantIdExpire + "年")
                    : merchantIdExpireStart.tip
                }}
              </div>
              <i class="zhk-list_rarrow"></i>
              <awesome-picker
                ref="merchantIdExpireStart"
                type="date"
                :textTitle="merchantIdExpireStart.textTitle"
                :anchor="merchantIdExpireStart.anchor"
                @confirm="
                  v =>
                    showPeriod('merchantIdExpire', 'merchantIdExpireStart', v)
                "
              >
              </awesome-picker>
              <awesome-picker
                ref="merchantIdExpire"
                :textTitle="merchantIdExpire.textTitle"
                :data="merchantIdExpire.data"
                :anchor="merchantIdExpire.anchor"
                @cancel="() => periodCancel('merchantIdExpireStart')"
                @confirm="
                  v =>
                    periodConfirm(
                      'merchantIdExpire',
                      v,
                      merchantIdExpire.data,
                      'merchantIdExpireStart'
                    )
                "
              >
              </awesome-picker>
            </div>
          </div>
          <mt-field
            class="border-bt"
            label="银行预留手机号"
            placeholder="请填写银行预留手机号"
            v-model="formData.accountPhone"
            :attr="{ maxlength: 11 }"
          ></mt-field>
          <div class="btn-box">
            <div class="form-title-center">
              <i
                :class="isChecked ? 'zhk-ty' : 'zhk-wxz'"
                @click="isChecked = !isChecked"
              />
              <div>
                我已阅读并同意
                <span @click="hlwskProtocol = true"
                  >《互联网收款服务协议》</span
                >
                <span @click="ydzfsdProtocol = true"
                  >《移动支付收单服务协议》</span
                >
              </div>
            </div>
            <mt-button class="btn" type="primary" @click="sumbit"
              >提交</mt-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import hlwsk from "../../components/protocol/hlwsk";
import ydzfsd from "../../components/protocol/ydzfsd";
import { Field, Toast, MessageBox, Button } from "mint-ui";
import jsBridge from "../../tools/jsBridge";
import AwesomePicker from "vue-awesome-picker";
import config from "../../base/profile/config.json";
import moment from "moment";
import StoreDetails from "../../components/StoreChoice/StoreDetails";
Vue.use(AwesomePicker);
export default {
  name: "changeSettlementAccount",
  data() {
    return {
      source: 1,
      shopListData: {},
      shopList: [],
      //处理下拉弹窗无法滚动
      bankItemVisible: true,
      reserveBankItemVisible: true,
      branchItemVisible: true,
      reserveBranchItemVisible: true,
      //协议
      hlwskProtocol: false,
      ydzfsdProtocol: false,
      isChecked: false, //检查协议
      //选择照片组件
      actions: [],
      chooseImgVisible: false,
      //开户行拼接字段
      branchAreaName: "",
      //公户开户行拼接字段
      reserveBranchAreaName: "",
      //表单数据
      formData: {
        merchantType: "03",
        accountType: "01", //商户类型
        settleAccountsType: "", //结算账户
        yzImgUnincorporated: "", //非法人结算证明照片
        yzIndustryLicensePhoto: "", //开户许可证照片
        yzImgBankcardA: "", //银行卡正面照
        reserveBankCertName: "", //公户开户名
        reserveBankCardNo: "", //公户卡号
        reserveBranchProvince: "", //公户开户行省code
        reserveBranchProvinceName: "", //公户开户行省名称
        reserveBranchCity: "", //公户开户行城市code
        reserveBranchCityName: "", //公户开户行城市名称
        reserveBankId: "", //公户开户银行ID
        reserveBankCode: "", //公户开户银行名称
        reserveBranchName: "", //公户支行名称
        reserveContactLine: "", //公户联行号
        bankCertName: "", //开户名
        bankCardNo: "", //银行账号
        branchProvince: "", //开户行省code
        branchProvinceName: "", //开户行省名称
        branchCity: "", //开户行城市code
        branchCityName: "", //开户行城市名称
        bankId: "", //开户银行ID
        bankCode: "", //开户银行名称
        branchName: "", //支行名称
        branchCode: "", //支行code
        contactLine: "", //联航号
        accountPhone: "", //银行预留手机号
        yzImgPrivateIdcardA: "", //对私非法人身份证正面照
        yzImgPrivateIdcardB: "", //对私非法人身份证反面照
        certNo: "", //非法人身份证号
        merchantIdExpireStart: "", //非法人身份证有效期开始时间
        merchantIdExpire: "" //非法人身份证有效期
      },
      sumbitData: {},
      ocrData: {
        bankCardNoOcr: "",
        bankCardNameOcr: "",
        bankCardNameOcr: "",
        idcardOcr: "", //身份证号
        idcardNameOcr: "", //姓名
        idcardNationalityOcr: "", //民族
        idcardSexOcr: "", //性别
        idcardBirthOcr: "", //出生日期
        idcardAddressOcr: "", //地址信息
        idcardValidStartDateOcr: "", //有效期起始时间
        idcardValidEndDateOcr: "", //有效期结束时间
        idcardIssueOcr: "" //签发机关
      },
      //商户类型
      auditShopType: {
        tip: "请选择",
        anchor: [],
        textTitle: "请选择",
        data: [["个体", "集体"]]
      },
      //非法人身份证有效期
      merchantIdExpireStart: {
        tip: "请选择",
        anchor: [],
        textTitle: "身份证有效期"
      },
      //非法人身份证有效期使用年限
      merchantIdExpire: {
        anchor: [],
        textTitle: "使用年限",
        data: [
          { key: "5", value: "5年" },
          { key: "10", value: "10年" },
          { key: "20", value: "20年" },
          { key: "29991231", value: "长期" }
        ]
      },
      //账户类型
      accountType: {
        tip: "请选择",
        anchor: [0],
        textTitle: "账户类型",
        data: [
          { key: "01", value: "对私账户" },
          { key: "02", value: "对公账户" }
        ]
      },
      //结算账户
      settleAccountsType: {
        tip: "请选择",
        anchor: [0],
        textTitle: "结算账户",
        data: [
          { key: "1", value: "法人" },
          { key: "2", value: "非法人" }
        ]
      },
      //开户银行
      bank: {
        tip: "请选择",
        anchor: [0],
        textTitle: "开户银行",
        data: []
      },
      //公户开户银行
      reserveBank: {
        tip: "请选择",
        anchor: [0],
        textTitle: "公户开户银行",
        data: []
      },
      //公户开户行所在地区
      reserveBranch: {
        tip: "请选择",
        anchor: [0],
        textTitle: "公户开户行所在地区",
        data: []
      },
      //开户行所在地区
      branch: {
        tip: "请选择",
        anchor: [0],
        textTitle: "开户行所在地区",
        data: []
      },
      //公户支行名称
      reserveBranchName: {
        tip: "请选择",
        anchor: [0],
        textTitle: "公户支行名称",
        data: []
      },
      //支行名称
      branchName: {
        tip: "请选择",
        anchor: [0],
        textTitle: "支行名称",
        data: []
      },
      //展开判断
      appendFlag: false
    };
  },
  created() {
    this.loadShopInfo();
    this.getShopList();
  },
  methods: {
    tipMsg() {
      return "涉及到变更的门店" + this.shopList.length + "家";
    },
    showStoreList() {
      this.$refs.StoreDetails.popupShow();
    },
    repeatImgUrl(url, resize) {
      if (resize) {
        return (
          CommonUtil.imgUrlFormate(url, config.previewUrlPrefix) +
          "?" +
          CommonUtil.imgUrlResize("m_fill", "230", "360")
        );
      }
      return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix);
    },
    //选择使用年限
    periodConfirm(key, v, data, startTime) {
      let diffVal = this.getIdToIndex(data, v)[0].key;
      this.formData[key] = diffVal;
    },
    //不选使用年限清空有效期
    periodCancel(key) {
      this.formData[key] = "";
    },
    periodToDate(start, deal) {
      const startDate = moment(start).format("YYYY-MM-DD");
      if (startDate && deal) {
        if (deal == "29991231") {
          return "长期";
        } else {
          return moment(startDate.replace(/-/g, "/"))
            .add(deal, "years")
            .format("YYYY-MM-DD");
        }
      }
      return;
    },
    //获取门店详情
    loadShopInfo() {
      let shopId = this.$route.query.shopId || "";
      let merchantId = this.$route.query.merchantId || "";
      this.ajax({
        url:
          "/newapp/AppMerchant/getBankCardInfo.do?shopId=" +
          shopId +
          "&merchantId=" +
          merchantId,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            this.sumbitData = res.resultObject;
            let merchantBankCardParamModel =
              res.resultObject.merchantBankCardParamModel;
            let merchantDetailModel = res.resultObject.merchantDetailModel;
            if (
              this.$route.query.failChange &&
              this.$route.query.failChange == "1"
            ) {
              let changeModel = sessionStorageClient.getJSON("changeModel");
              this.formData = Object.assign({}, this.formData, changeModel);
              if (this.$route.query.mType) {
                this.formData.merchantType = this.$route.query.mType;
              }
              this.formData.merchantCompany =
                merchantDetailModel.merchantCompany;
              this.formData.legalPerson = merchantDetailModel.legalPerson;
              this.branchAreaName =
                (this.formData.branchProvinceName || "") +
                (this.formData.branchCityName
                  ? " - " + this.formData.branchCityName
                  : "");
            } else {
              const merchantId = merchantBankCardParamModel.merchantId;
              this.formData = Object.assign(
                {},
                this.formData,
                merchantBankCardParamModel
              );
              this.formData = Object.assign(
                {},
                this.formData,
                merchantDetailModel
              );
              this.formData.settleAccountsType =
                res.resultObject.settlementType;
              this.formData.merchantType = res.resultObject.merchantType;
              this.formData.merchantId = merchantId;
              this.branchAreaName =
                (this.formData.branchProvinceName || "") +
                (this.formData.branchCityName
                  ? " - " + this.formData.branchCityName
                  : "");
              this.reserveBranchAreaName =
                (this.formData.reserveBranchProvinceName || "") +
                (this.formData.reserveBranchCityName
                  ? " - " + this.formData.reserveBranchCityName
                  : "");
            }
            this.formData.reserveBankCertName = this.formData.merchantCompany;
            if (this.formData.accountType == "02") {
              this.formData.settleAccountsType = 1;
            }
            this.sumbitData.channelType == 8 && this.setDefaultAnchor();
            this.setDefaultMerchantIdExpireStart(
              merchantBankCardParamModel.merchantIdExpireStart
            );
            this.formData.merchantIdExpireStart = this.formData
              .merchantIdExpireStart
              ? this.changeMoment(this.formData.merchantIdExpireStart)
              : "";
            this.getCityMapped();
            this.getBank();
            this.getBranchName();
            this.setDefaultMerchantIdExpire(
              merchantBankCardParamModel.merchantIdExpire
            );
            if (
              this.formData.merchantType == "03" &&
              this.formData.accountType == "01" &&
              this.formData.reserveBranchProvince
            ) {
              this.getReserveBank();
              this.getReserveBranchName();
            }
          } else {
            Toast("加载门店信息失败");
          }
        })
        .catch(err => {
          MessageBox.alert("获取门店信息异常，请稍候重试").then(action => {
            this.$router.back();
          });
        });
    },
    changeMoment(date) {
      return moment(date).format("YYYY-MM-DD");
    },
    setDefaultAnchor() {
      let indexS = 0;
      let indexA = 0;
      this.settleAccountsType.data.forEach((e, i) => {
        if (e.key == this.formData.settleAccountsType) {
          indexS = i;
        }
      });
      this.settleAccountsType.anchor = [{ index: indexS }];

      this.accountType.data.forEach((e, i) => {
        if (e.key == this.formData.accountType) {
          indexA = i;
        }
      });
      this.accountType.anchor = [{ index: indexA }];
    },
    setDefaultMerchantIdExpireStart(v) {
      if (v) {
        let yIndex = 0;
        let mIndex = 0;
        let dIndex = 0;
        const date = new Date(v);
        yIndex = date.getFullYear() - 1900;
        mIndex = date.getMonth();
        dIndex = date.getDate() - 1;
        this.merchantIdExpireStart.anchor = [yIndex, mIndex, dIndex];
      }
    },
    setDefaultMerchantIdExpire(v) {
      if (v) {
        let index = 0;
        this.merchantIdExpire.data.forEach((e, i) => {
          if (e.key == v) {
            index = i;
          }
        });
        this.merchantIdExpire.anchor = [{ index: index }];
      }
    },
    //开户行所在地区
    getCityMapped(reload) {
      this.ajax({
        type: "get",
        url: "/newapp/AppMerchant/getCityMapped.do"
      })
        .then(response => {
          if (response && response.success) {
            const branchData = response.resultObject;
            this.branch.data = this.resetBranchAreaData(branchData);
            this.reserveBranch.data = this.resetBranchAreaData(branchData);
            if (!reload) {
              debugger;
              let provinceIndex = 0;
              let cityIndex = 0;
              let reserveProvinceIndex = 0;
              let reserveCityIndex = 0;
              this.branch.data.forEach((e, i) => {
                if (e.key == this.formData.branchProvince) {
                  provinceIndex = i;
                  e.children.forEach((f, j) => {
                    if (f.key == this.formData.branchCity) {
                      cityIndex = j;
                    }
                  });
                }
              });
              this.reserveBranch.data.forEach((e, i) => {
                if (e.key == this.formData.reserveProvinceIndex) {
                  provinceIndex = i;
                  e.children.forEach((f, j) => {
                    if (f.key == this.formData.reserveCityIndex) {
                      cityIndex = j;
                    }
                  });
                }
              });
              this.branch.anchor = [[provinceIndex], [cityIndex]];
              this.reserveBranch.anchor = [
                [reserveProvinceIndex],
                [reserveCityIndex]
              ];
            }
          } else {
            Toast("加载开户行所在地区失败");
          }
        })
        .catch(err => {
          MessageBox.alert("获取数据异常，请稍候重试").then(action => {
            this.$router.back();
          });
        });
    },
    //开户银行
    getBank() {
      //初始话
      this.ajax({
        type: "get",
        url:
          "/app/AppMerchant/queryMerchantBankCode.do?province=" +
          (this.formData.branchProvince || "") +
          "&city=" +
          (this.formData.branchCity || "")
      })
        .then(response => {
          if (response && response.success) {
            const bankData = response.resultObject;
            //对开户银行数据处理
            this.bank.data = this.resetBankData(bankData);
            this.bankItemVisible = true;
            let index = 0;
            this.bank.data.forEach((e, i) => {
              if (e.key == this.formData.bankId) {
                index = i;
              }
            });
            this.bank.anchor = [{ index: index }];
          } else {
            Toast("加载开户银行失败");
          }
        })
        .catch(err => {
          this.bankItemVisible = true;
          MessageBox.alert(
            "获取数据异常，请重新选择开户行所在地区"
          ).then(action => {});
        });
    },
    //公户开户银行
    getReserveBank() {
      this.ajax({
        type: "get",
        url:
          "/app/AppMerchant/queryMerchantBankCode.do?province=" +
          (this.formData.reserveBranchProvince || "") +
          "&city=" +
          (this.formData.reserveBranchCity || "")
      })
        .then(response => {
          if (response && response.success) {
            const bankData = response.resultObject;
            //对开户银行数据处理
            this.reserveBank.data = this.resetBankData(bankData);
            this.reserveBankItemVisible = true;
            let index = 0;
            this.reserveBank.data.forEach((e, i) => {
              if (e.key == this.formData.reserveBankId) {
                index = i;
              }
            });
            this.reserveBank.anchor = [{ index: index }];
          } else {
            Toast("加载公户开户银行失败");
          }
        })
        .catch(err => {
          this.reserveBankItemVisible = true;
          MessageBox.alert(
            "获取数据异常，请重新选择开户行所在地区"
          ).then(action => {});
        });
    },
    //获取公户支行名称
    getReserveBranchName() {
      this.ajax({
        type: "get",
        url:
          "/app/AppMerchant/queryMerchantBankName.do?province=" +
          (this.formData.reserveBranchProvince || "") +
          "&city=" +
          (this.formData.reserveBranchCity || "") +
          "&parentId=" +
          (this.formData.reserveBankId || "")
      })
        .then(response => {
          if (response && response.success) {
            const branchData = response.resultObject;
            //对开户银行数据处理
            this.reserveBranchName.data = this.resetBranchData(branchData);
            this.reserveBranchItemVisible = true;
            let index = 0;
            this.reserveBranchName.data.forEach((e, i) => {
              if (e.key == this.formData.reserveContactLine) {
                index = i;
              }
            });
            this.reserveBranchName.anchor = [{ index: index }];
          } else {
            Toast("加载支行名称失败");
          }
        })
        .catch(err => {
          this.reserveBranchItemVisible = true;
          MessageBox.alert(
            "获取数据异常，请重新选择开户银行"
          ).then(action => {});
        });
    },
    //获取支行名称
    getBranchName() {
      this.ajax({
        type: "get",
        url:
          "/app/AppMerchant/queryMerchantBankName.do?province=" +
          (this.formData.branchProvince || "") +
          "&city=" +
          (this.formData.branchCity || "") +
          "&parentId=" +
          (this.formData.bankId || "")
      })
        .then(response => {
          if (response && response.success) {
            const branchData = response.resultObject;
            //对开户银行数据处理
            this.branchName.data = this.resetBranchData(branchData);
            this.branchItemVisible = true;
            let index = 0;
            this.branchName.data.forEach((e, i) => {
              if (e.key == this.formData.contactLine) {
                index = i;
              }
            });
            this.branchName.anchor = [{ index: index }];
          } else {
            Toast("加载支行名称失败");
          }
        })
        .catch(err => {
          this.branchItemVisible = true;
          MessageBox.alert(
            "获取数据异常，请重新选择开户银行"
          ).then(action => {});
        });
    },
    //上传图片到服务器
    doUploadPic: function(type, result, ocr) {
      var serverUrl = window.APP.serverUrl;
      var url = serverUrl + "/newapp/img/uploadShopImg.do";
      let params = {};
      //身份证正面ocr
      if (ocr == "baidu_ocr_bank_idcard_front") {
        url = serverUrl + "/newapp/imgManage/uploadOCRImage.do"; //ocr识别上传地址
        params.code = "ocr_idcard";
        params.cardSide = "front";
        params.uploadType = "01";
      }
      //身份证反面ocr
      if (ocr == "baidu_ocr_bank_idcard_back") {
        url = serverUrl + "/newapp/imgManage/uploadOCRImage.do"; //ocr识别上传地址
        params.code = "ocr_idcard";
        params.cardSide = "back";
        params.uploadType = "02";
      }
      //银行卡
      if (ocr == "baidu_ocr_bankcard") {
        url = serverUrl + "/newapp/imgManage/uploadOCRImage.do"; //ocr识别上传地址
        params.code = "ocr_bankcard";
        params.uploadType = "07";
      }

      jsBridge.doUploadPic(
        {
          url: url,
          file: result.resultObject,
          data: params,
          //限制图片压缩后的大小最大1.2M
          compress: { sizeLimit: "1", unit: "M" }
        },
        result => {
          //以下为正常的业务逻辑
          if (result && result.success) {
            var uploadResult = result.resultObject;
            if (uploadResult && uploadResult.imageUrl) {
              var url = uploadResult.imageUrl;
              if (typeof this.formData[type] == "string") {
                this.formData[type] = url;
              }
              if (typeof this.formData[type] == "object") {
                this.formData[type].push(url);
              }
            }
            //ocr 图像识别
            if (ocr) {
              if (
                uploadResult.ocrSuccess &&
                Object.keys(JSON.parse(uploadResult.ocrResult)).length != 0
              ) {
                let ocrData = JSON.parse(uploadResult.ocrResult); //ocr识别出的数据
                const formData = this.formData; //表单填写的数据
                //银行卡
                if (ocr == "baidu_ocr_bankcard") {
                  let flag = false;
                  let messageText = "";
                  if (
                    !formData.bankCardNo ||
                    formData.bankCardNo == ocrData.num
                  ) {
                    this.formData.bankCardNo = ocrData.num;
                  } else {
                    flag = true;
                    messageText =
                      messageText +
                      "<div style='display:flex'><div>" +
                      "银行账号：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" +
                      ocrData.num +
                      "</div></div>";
                  }
                  this.ocrData.bankCardNoOcr = ocrData.num || ""; //银行卡账号
                  this.ocrData.bankCardNameOcr = ocrData.bankName || ""; //银行卡名字
                  if (flag) {
                    this.checkOrcReturn(messageText, "baidu_ocr_bankcard");
                  }
                }
                //身份证正面
                if (ocr == "baidu_ocr_bank_idcard_front") {
                  let flag = false;
                  let messageText = "";
                  if (!formData.certNo || formData.certNo == ocrData.num) {
                    this.formData.certNo = ocrData.num;
                  } else {
                    flag = true;
                    messageText =
                      messageText +
                      "<div style='display:flex'><div>" +
                      "身份证号：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" +
                      ocrData.num +
                      "</div></div>";
                  }
                  if (
                    !formData.bankCertName ||
                    formData.bankCertName == ocrData.name
                  ) {
                    this.formData.bankCertName = ocrData.name;
                  } else {
                    flag = true;
                    messageText =
                      messageText +
                      "<div style='display:flex'><div>" +
                      "开户名：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" +
                      ocrData.name +
                      "</div></div>";
                  }
                  this.ocrData.idcardOcr = ocrData.num || ""; //身份证号
                  this.ocrData.idcardNameOcr = ocrData.name || ""; //姓名
                  this.ocrData.idcardNationalityOcr = ocrData.nationality || ""; //民族
                  this.ocrData.idcardSexOcr = ocrData.sex || ""; //性别
                  this.ocrData.idcardBirthOcr = ocrData.birth || ""; //出生日期
                  this.ocrData.idcardAddressOcr = ocrData.address || ""; //地址信息
                  if (flag) {
                    this.checkOrcReturn(
                      messageText,
                      "baidu_ocr_bank_idcard_front"
                    );
                  }
                }
                //身份证反面
                if (ocr == "baidu_ocr_bank_idcard_back") {
                  let flag = false;
                  let messageText = "";
                  //身份证有效期
                  let startDate = ocrData.startDate ? ocrData.startDate : ""; //ocr返回的是‘20190101’转换成‘2019-01-02’格式
                  let endDate = ocrData.endDate ? ocrData.endDate : "";
                  const startYear = moment(startDate.replace(/-/g, "/")).format(
                    "YYYY"
                  );
                  const endYear = moment(endDate.replace(/-/g, "/")).format(
                    "YYYY"
                  );
                  let difference = endYear - startYear;
                  if (difference <= 0) {
                    endDate = "";
                  }
                  let differenceFlag = false;
                  this.merchantIdExpire.data.map(item => {
                    if (difference <= 20) {
                      if (item.key == difference) {
                        differenceFlag = true;
                      }
                    } else {
                      differenceFlag = true;
                    }
                  });
                  if (!differenceFlag) {
                    endDate = "";
                  }
                  if (
                    (!formData.merchantIdExpireStart ||
                      formData.merchantIdExpireStart == startDate) &&
                    (!formData.merchantIdExpire ||
                      formData.merchantIdExpire ==
                        (endDate == "2999-12-31" ? "29991231" : endDate))
                  ) {
                    if (startDate && endDate) {
                      this.formData.merchantIdExpireStart = startDate; //起始时间

                      if (difference > 20) {
                        this.formData.merchantIdExpire = "29991231"; //结束时间
                        endDate = "29991231";
                      } else {
                        this.formData.merchantIdExpire = difference;
                        endDate = difference;
                      }
                    } else {
                      this.formData.merchantIdExpireStart = ""; //起始时间
                      this.formData.merchantIdExpire = ""; //结束时间
                    }
                  } else {
                    if (startDate && endDate) {
                      flag = true;
                      if (difference > 20) {
                        endDate = "29991231"; //结束时间
                      } else {
                        endDate = difference;
                      }
                      messageText =
                        messageText +
                        "<div style='display:flex'><div>" +
                        "身份证有效期：</div><div style='flex:1;word-wrap:break-word;word-break:break-all'>" +
                        startDate +
                        " 至 " +
                        (endDate == "29991231" ? "长期" : difference + "年") +
                        "</div></div>";
                    }
                  }
                  this.ocrData.idcardValidStartDateOcr = startDate || ""; //有效期起始时间
                  this.ocrData.idcardValidEndDateOcr = endDate; //有效期结束时间
                  this.ocrData.idcardIssueOcr = ocrData.issue || ""; //签发机关
                  if (flag) {
                    this.checkOrcReturn(
                      messageText,
                      "baidu_ocr_bank_idcard_back"
                    );
                  }
                }
              } else {
                MessageBox({
                  title: "提示",
                  message:
                    "无法识别图片中的内容，通常是由于图片模糊不清造成，建议更换清晰图片",
                  confirmButtonText: "知道了"
                });
              }
            }

            return;
          }
          var msg = result.msg || "上传失败";
          Toast(msg);
        },
        function(result) {

        }
      );
    },
    //ocr图像识别
    checkOrcReturn(messageText, ocr) {
      MessageBox({
        title: "是否覆盖已有内容",
        message: `<div style="text-align:left">${messageText}</div>`,
        confirmButtonText: "是",
        cancelButtonText: "否",
        showCancelButton: true
      }).then(action => {
        if (action == "confirm") {
          if (ocr == "baidu_ocr_bankcard") {
            this.formData.bankCardNo = this.ocrData.bankCardNoOcr || ""; //银行卡账号
          }
          if (ocr == "baidu_ocr_bank_idcard_front") {
            this.formData.certNo = this.ocrData.idcardOcr || ""; //身份证号
            this.formData.bankCertName = this.ocrData.idcardNameOcr || "";
          }
          if (ocr == "baidu_ocr_bank_idcard_back") {
            if (
              this.ocrData.idcardValidStartDateOcr &&
              this.ocrData.idcardValidEndDateOcr
            ) {
              this.formData.merchantIdExpireStart =
                this.ocrData.idcardValidStartDateOcr || ""; //有效期起始时间
              this.formData.merchantIdExpire =
                this.ocrData.idcardValidEndDateOcr || ""; //有效期结束时间
            }
          }
        }
      });
    },
    //开户行所在地区数据处理
    resetBranchAreaData(data) {
      const newData = [];
      data.map((item, index) => {
        if (item.cityType == "province") {
          const obj = {
            key: item.fuyouCityId,
            value: item.fuyouCityName,
            children: []
          };
          newData.push(obj);
        }
      });
      data.map((item, index) => {
        if (item.cityType == "city") {
          const obj = {
            key: item.fuyouCityId,
            value: item.fuyouCityName,
            pid: item.fuyouCityPid
          };
          for (let i = 0; i < newData.length; i++) {
            if (newData[i].key == obj.pid) {
              newData[i].children.push(obj);
            }
          }
        }
      });
      return newData;
    },
    //开户银行数据处理
    resetBankData(data) {
      const newData = [];
      data.map(item => {
        const obj = {
          key: item.bankId,
          value: item.bankMainName
        };
        newData.push(obj);
      });
      return newData;
    },
    //支行名称数据处理
    resetBranchData(data) {
      const newData = [];
      data.map(item => {
        const obj = {
          key: item.contactLine,
          value: item.bankName
        };
        newData.push(obj);
      });
      return newData;
    },
    //点击请选择弹出选择项
    showPicker(ref) {
      if (ref == "bank") {
        if (!this.formData.branchProvince || !this.formData.branchCity) {
          Toast("请选择开户行所在地区");
          return;
        }
      }
      if (ref == "reserveBank") {
        if (
          !this.formData.reserveBranchProvince ||
          !this.formData.reserveBranchCity
        ) {
          Toast("请选择公户开户行所在地区");
          return;
        }
      }
      if (ref == "branchName") {
        if (!this.formData.bankId) {
          Toast("请选择开户银行");
          return;
        }
      }
      if (ref == "reserveBranchName") {
        if (!this.formData.reserveBankId) {
          Toast("请选择公户开户银行");
          return;
        }
      }
      this.$refs[ref].show();
    },
    clearData() {
      this.formData.yzImgUnincorporated = "";
      this.formData.yzIndustryLicensePhoto = "";
      this.formData.yzImgBankcardA = "";
      this.formData.yzImgPrivateIdcardA = "";
      this.formData.yzImgPrivateIdcardB = "";
      this.formData.certNo = "";
      this.formData.merchantIdExpireStart = "";
      this.formData.merchantIdExpire = "";
      this.formData.bankCardNo = ""; //银行账号
      this.branchAreaName = "";
      this.branch.anchor = [0];
      this.formData.branchProvince = ""; //开户行省code
      this.formData.branchProvinceName = ""; //开户行省名称
      this.formData.branchCity = ""; //开户行城市code
      this.formData.branchCityName = ""; //开户行城市名称
      this.formData.bankId = ""; //开户银行ID
      this.formData.bankCode = ""; //开户银行名称
      this.formData.branchName = ""; //支行名称
      this.formData.branchCode = ""; //支行code
      this.formData.contactLine = ""; //联航号
      this.formData.accountPhone = ""; //银行预留手机号
      this.ocrData.bankCardNoOcr = ""; //银行卡账号
      this.ocrData.bankCardNameOcr = ""; //银行卡名字
      this.formData.reserveBankCardNo = ""; //公户卡号
      this.reserveBranchAreaName = "";
      this.reserveBranch.anchor = [0];
      this.formData.reserveBranchProvince = ""; //公户开户行省code
      this.formData.reserveBranchProvinceName = ""; //公户开户行省名称
      this.formData.reserveBranchCity = ""; //公户开户行城市code
      this.formData.reserveBranchCityName = ""; //公户开户行城市名称
      this.formData.reserveBankId = ""; //公户开户银行ID
      this.formData.reserveBankCode = ""; //公户开户银行名称
      this.formData.reserveBranchName = ""; //公户支行名称
      this.formData.reserveContactLine = ""; //公户联行号
      this.getCityMapped(true);
    },
    //弹窗选择回掉赋值
    handleConfirm(key, v, data) {
      if (v.length > 0 && String(v[0].index) == "NaN") {
        if (this[key].data.length > 0) {
          v[0].value = this[key].data[0].value;
          v[0].index = 0;
        }
      }
      if (key == "accountType") {
        let merchantType = this.formData.merchantType;
        let accountType = v[0].index; //0对私 1对公
        this.formData.settleAccountsType = 1;
        //如果是企业或者个体户 对公 开户名赋值公司全称切不可修改 结算账户类型赋值法人切不可修改 其它字段清空

        if (
          (merchantType == "03" || merchantType == "02") &&
          accountType == 1
        ) {
          this.formData.bankCertName = this.formData.merchantCompany;
          this.clearData();
        }
        //如果是企业或者个体户 对私 开户名赋值法人姓名/经营者姓名切不可修改 结算账户类型默认赋值法人 其它字段清空
        if (
          (merchantType == "03" || merchantType == "02") &&
          accountType == 0
        ) {
          //如果是企业 公户开户名取公司全称切不可修改
          if (merchantType == "03") {
            this.formData.reserveBankCertName = this.formData.merchantCompany; //公户开户名
          } else {
            this.formData.reserveBankCertName = ""; //公户开户名
          }
          this.formData.bankCertName = this.formData.legalPerson;
          this.clearData();
        }
      }
      if (key == "settleAccountsType") {
        debugger;
        let merchantType = this.formData.merchantType;
        let accountType = this.formData.accountType;
        let settleAccountsType = v[0].index; //0法人 1非法人
        //如果是企业或者个体户 对私 法人 开户名赋值法人姓名/经营者姓名切不可修改  其它字段清空
        if (
          (merchantType == "03" || merchantType == "02") &&
          accountType == "01" &&
          settleAccountsType == 0
        ) {
          //如果是企业 公户开户名取公司全称切不可修改
          if (merchantType == "03") {
            this.formData.reserveBankCertName = this.formData.merchantCompany; //公户开户名
          } else {
            this.formData.reserveBankCertName = ""; //公户开户名
          }
          this.formData.bankCertName = this.formData.legalPerson;
          this.clearData();
        }
        //如果是企业或者个体户 对私 非法人 字段清空 开户名可编辑
        if (
          (merchantType == "03" || merchantType == "02") &&
          accountType == "01" &&
          settleAccountsType == 1
        ) {
          //如果是企业 公户开户名取公司全称切不可修改
          if (merchantType == "03") {
            this.formData.reserveBankCertName = this.formData.merchantCompany; //公户开户名
          } else {
            this.formData.reserveBankCertName = ""; //公户开户名
          }
          this.formData.bankCertName = "";
          this.clearData();
        }
      }
      if (key == "branch") {
        if (
          JSON.stringify(this[key].anchor) ==
          JSON.stringify([v[0].index, v[1].index])
        ) {
          return;
        }
        this.branchAreaName =
          v[0].value + (v[1] ? " - " : "") + (v[1] ? v[1].value : "");
        this.formData.branchProvinceName = v[0].value || "";
        this.formData.branchCityName = v[1].value || "";
        this.formData.branchProvince = this.getIdToIndex(data, v)[0].key || ""; //省code
        this.formData.branchCity = this.getIdToIndex(data, v)[1].key || ""; //市code
        this[key].anchor = [v[0].index, v[1].index];

        this.bank.data = [];
        this.bank.anchor = [{ index: 0, value: "" }];
        this.formData.bankId = "";
        this.formData.bankCode = "";

        this.bankItemVisible = false;
        this.branchName.data = [];
        this.branchName.anchor = [0];
        (this.formData.branchName = ""), //支行名称
          (this.formData.branchCode = ""), //支行code
          this.getBank();
        return;
      }
      if (key == "reserveBranch") {
        if (
          JSON.stringify(this[key].anchor) ==
          JSON.stringify([v[0].index, v[1].index])
        ) {
          return;
        }
        this.reserveBranchAreaName =
          v[0].value + (v[1] ? " - " : "") + (v[1] ? v[1].value : "");
        this.formData.reserveBranchProvinceName = v[0].value || "";
        this.formData.reserveBranchCityName = v[1].value || "";
        this.formData.reserveBranchProvince =
          this.getIdToIndex(data, v)[0].key || ""; //省code
        this.formData.reserveBranchCity =
          this.getIdToIndex(data, v)[1].key || ""; //市code
        this[key].anchor = [v[0].index, v[1].index];
        this.reserveBankItemVisible = false;
        //初始话
        this.reserveBank.data = [];
        this.reserveBank.anchor = [];
        this.formData.reserveBankId = "";
        this.formData.reserveBankCode = "";
        this.reserveBranchName.data = [];
        this.formData.reserveBranchName = ""; //支行名称
        this.formData.reserveBranchCode = ""; //支行code
        this.formData.reserveContactLine = "";
        this.getReserveBank();
        return;
      }
      if (key == "bank") {
        if (this[key].anchor.value == [v[0].value]) {
          return;
        }
        this.formData.bankCode = v[0].value;
        this.formData.bankId = this.getIdToIndex(data, v)[0].key || ""; //开户行ID
        this[key].anchor = [v[0].index];
        this.branchItemVisible = false;
        this.branchName.data = [];
        (this.formData.branchName = ""), //支行名称
          (this.formData.branchCode = ""), //支行code
          this.getBranchName();
        return;
      }
      if (key == "reserveBank") {
        if (this[key].anchor.value == [v[0].value]) {
          return;
        }
        this.formData.reserveBankCode = v[0].value;
        this.formData.reserveBankId = this.getIdToIndex(data, v)[0].key || ""; //开户行ID
        this[key].anchor = [v[0].index];
        this.reserveBranchItemVisible = false;
        this.reserveBranchName.data = [];
        this.formData.reserveBranchName = ""; //支行名称
        this.formData.reserveBranchCode = ""; //支行code
        this.formData.reserveContactLine = "";
        this.getReserveBranchName();
        return;
      }
      if (key == "branchName") {
        if (this[key].anchor.value == [v[0].value]) {
          return;
        }
        this.formData.branchName = v[0].value;
        this.formData.contactLine = this.getIdToIndex(data, v)[0].key || ""; //支行ID
        this[key].anchor = [v[0].index];
        return;
      }
      if (key == "reserveBranchName") {
        if (this[key].anchor.value == [v[0].value]) {
          return;
        }
        this.formData.reserveBranchName = v[0].value;
        this.formData.reserveContactLine =
          this.getIdToIndex(data, v)[0].key || ""; //公户联行号
        this[key].anchor = [v[0].index];
        return;
      }
      this[key].anchor = [v[0].index];
      this.formData[key] = this.getIdToIndex(data, v)[0].key;
    },
    //有效期弹窗
    showPeriod(key, label, v) {
      this.$refs[key].show();
      if (v) {
        //拼接日期
        let year = v[0].value.substring(0, v[0].value.length - 1);
        let mouth = v[1].value.substring(0, v[1].value.length - 1);
        let days = v[2].value.substring(0, v[2].value.length - 1);
        this.formData[label] = moment(year + "/" + mouth + "/" + days).format(
          "YYYY-MM-DD"
        );
      }
    },
    //选择图片的方式本地相册或者拍照,如果传index此字段是数组多张图片，不传字段为字符串单张图片
    chooseImg: function(type, ocr) {
      var _this = this;
      _this.actions = [
        {
          name: "拍照",
          method: function() {
            jsBridge.selectPicture(
              {
                options: "拍照",
                noCrop: true,
                compress: { sizeLimit: "1", unit: "M" }
              },
              function(result) {
                _this.doUploadPic(type, result, ocr);
              },
              function(result) {
              }
            );
          }
        },
        {
          name: "选择图片",
          method: function() {
            jsBridge.selectPicture(
              {
                options: "选择图片",
                noCrop: true,
                compress: { sizeLimit: "1", unit: "M" }
              },
              function(result) {
                _this.doUploadPic(type, result, ocr);
              },
              function(result) {

              }
            );
          }
        }
      ];

      this.chooseImgVisible = true;
      return false;
    },
    //删除图片
    delImage(key) {
      if (typeof this.formData[key] == "string") {
        this.formData[key] = "";
        return;
      }
      if (typeof this.formData[key] == "object") {
        this.formData[key].splice(0, 1);
        return;
      }
    },
    //根据枚举展示字段名字
    showIdName(data, key) {
      let name = "";
      for (let i = 0; i < data.length; i++) {
        if (data[i].key == key) {
          return data[i].value;
        }
      }

      return;
    },
    getIdToIndex(data, indexArr) {
      const lev = indexArr.length;
      let n = 0;
      let res = [];
      const getData = datas => {
        n = n + 1;
        if (n == lev) {
          res.push(datas[indexArr[n - 1].index]);
        } else {
          res.push(datas[indexArr[n - 1].index]);
          getData(datas[indexArr[n - 1].index].children);
        }
      };
      getData(data);
      return res;
    },
    showImg: function(url) {
      let urlArr = [];
      urlArr.push(this.repeatImgUrl(url));
      try {
        jsBridge.viewPicture({ files: urlArr }, function(params) {

        });
      } catch (e) {
        Toast("预览失败");
      }
    },
    getAwesomeData(data) {
      let newData = [[]];
      data.map(item => {
        newData[0].push(item.value);
      });
      return newData;
    },
    sumbitVerify() {
      //channelType==8乐刷 可编辑需要校验
      if (this.sumbitData.channelType == 8 && !this.formData.accountType) {
        Toast("请选择账户类型");
        return false;
      }

      if (
        this.sumbitData.channelType == 8 &&
        this.formData.accountType == "01"
      ) {
        if (!this.formData.settleAccountsType) {
          Toast("请选择结算账户");
          return false;
        }
      }
      if (
        this.formData.merchantType == "03" &&
        this.formData.accountType == "01"
      ) {
        if (!this.formData.reserveBankCertName) {
          Toast("请填写开户人名称");
          return false;
        }
        if (
          !/^[\u4e00-\u9fa50-9a-zA-Z（）().·]+$/.test(
            this.formData.reserveBankCertName
          )
        ) {
          Toast("开户人名称不允许包含特殊字符");
          return false;
        }
        if (!this.formData.reserveBankCardNo) {
          Toast("请填写银行账号");
          return false;
        }
        if (!this.reserveBranchAreaName) {
          Toast("请选择开户行所在地区");
          return false;
        }
        if (!this.formData.reserveBankCode) {
          Toast("请选择开户银行");
          return false;
        }
        if (!this.formData.reserveBranchName) {
          Toast("请选择支行");
          return false;
        }
        if (!this.formData.reserveContactLine) {
          Toast("请填写联行号");
          return false;
        }
      }
      if (this.formData.settleAccountsType == "2") {
        if (!this.formData.yzImgUnincorporated) {
          Toast("请上传非法人结算证明");
          return false;
        }
      }
      if (
        this.formData.merchantType == "03" ||
        (this.formData.merchantType == "02" &&
          this.formData.accountType == "02")
      ) {
        if (!this.formData.yzIndustryLicensePhoto) {
          Toast("请上传开户许可证照片");
          return false;
        }
      }
      if (
        this.formData.accountType != "02" ||
        this.formData.merchantType == "01"
      ) {
        if (!this.formData.yzImgBankcardA) {
          Toast("请上传银行卡照片");
          return false;
        }
      }
      if (this.formData.settleAccountsType == "2") {
        if (!this.formData.yzImgPrivateIdcardA) {
          Toast("请上传身份证照片（正面）");
          return false;
        }
        if (!this.formData.yzImgPrivateIdcardB) {
          Toast("请上传身份证照片（反面）");
          return false;
        }
        if (!this.formData.certNo) {
          Toast("请填写身份证号");
          return false;
        }
        var test = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if (
          !reg.test(this.formData.certNo) &&
          !test.test(this.formData.certNo)
        ) {
          Toast("请输入正确的身份证号码");
          return false;
        }
      }
      if (!this.formData.bankCertName) {
        Toast("请填写开户人名称");
        return false;
      }
      if (
        !/^[\u4e00-\u9fa50-9a-zA-Z()（）.·]+$/.test(this.formData.bankCertName)
      ) {
        Toast("开户人名称不允许包含特殊字符");
        return false;
      }
      if (!this.formData.bankCardNo) {
        Toast("请填写银行账号");
        return false;
      }
      if (!this.branchAreaName) {
        Toast("请选择开户行所在地区");
        return false;
      }
      if (!this.formData.bankCode) {
        Toast("请选择开户银行");
        return false;
      }
      if (!this.formData.branchName) {
        Toast("请选择支行");
        return false;
      }
      if (!this.formData.branchName) {
        Toast("请选择支行");
        return false;
      }
      if (!this.formData.contactLine) {
        Toast("请填写联行号");
        return false;
      }
      if (this.formData.accountPhone) {
        if (!/^1[0-9]{10}$/.test(this.formData.accountPhone)) {
          Toast("请填写有效手机号");
          return false;
        }
      }
      return true;
    },
    sumbit() {
      if (this.isChecked) {
        let merchantBankCardParamModelMerchantType = this.sumbitData
          .merchantBankCardParamModel.merchantType;
        for (let key in this.sumbitData.merchantBankCardParamModel) {
          this.sumbitData.merchantBankCardParamModel[key] =
            this.formData[key] ||
            this.sumbitData.merchantBankCardParamModel[key];
        }
        for (let key in this.sumbitData.merchantDetailModel) {
          this.sumbitData.merchantDetailModel[key] =
            this.formData[key] || this.sumbitData.merchantDetailModel[key];
        }
        this.sumbitData.settlementType = this.formData.settleAccountsType;
        this.sumbitData.merchantBankCardParamModel.merchantType = merchantBankCardParamModelMerchantType;
        this.sumbitData.merchantBankCardParamModel.accountPhone = this.formData.accountPhone;
        this.sumbitData.merchantBankCardParamModel.merchantIdExpireStart = new Date(
          this.formData.merchantIdExpireStart.replace(/-/g, "/")
        ).getTime();
        if (
          this.formData.merchantType == "03" &&
          this.formData.accountType == "01"
        ) {
          this.sumbitData.merchantBankCardParamModel.reserveBankCertName = this.formData.reserveBankCertName;
          this.sumbitData.merchantBankCardParamModel.reserveBankCardNo = this.formData.reserveBankCardNo;
          this.sumbitData.merchantBankCardParamModel.reserveBranchProvince = this.formData.reserveBranchProvince;
          this.sumbitData.merchantBankCardParamModel.reserveBranchProvinceName = this.formData.reserveBranchProvinceName;
          this.sumbitData.merchantBankCardParamModel.reserveBranchCity = this.formData.reserveBranchCity;
          this.sumbitData.merchantBankCardParamModel.reserveBranchCityName = this.formData.reserveBranchCityName;
          this.sumbitData.merchantBankCardParamModel.reserveBankId = this.formData.reserveBankId;
          this.sumbitData.merchantBankCardParamModel.reserveBankCode = this.formData.reserveBankCode;
          this.sumbitData.merchantBankCardParamModel.reserveBranchName = this.formData.reserveBranchName;
          this.sumbitData.merchantBankCardParamModel.reserveContactLine = this.formData.reserveContactLine;
        }
        const params = this.sumbitData;
        if (this.sumbitVerify()) {
          let url = "/newapp/AppMerchant/modifyBankCard.do";
          this.ajax({
            type: "post",
            url: url,
            data: params
          }).then(response => {
            if (response && response.success) {
              Toast("提交成功，待审批！");
              if (this.$route.query.source == 1) {
                this.$router.go(-2);
              } else {
                this.$router.go(-1);
              }
            } else {
              Toast(response.msg);
            }
          });
        }
      } else {
        Toast("请阅读并同意协议");
      }
    },
    handleBack() {
      if (this.$route.query.source == 1) {
        this.$router.go(-2);
      } else {
        this.$router.go(-1);
      }
    },
    //获取门店列表（多门店共用商户号，点击顶部提示查看全部门店列表页）
    getShopList() {
      this.ajax({
        type: "get",
        url: `/newapp/shop/queryShopNameByMerchantId.do?merchantId=${this.$route.query.merchantId}`
      })
        .then(res => {
          if (res && res.success) {
            const data = res.resultObject;
            this.shopListData = res.resultObject;
            for (var cityName in data) {
              if (data[cityName] && data[cityName].length > 0) {
                for (var i = 0; i < data[cityName].length; i++) {
                  this.shopList.push({
                    shopId: data[cityName][i].shopId,
                    shopName: data[cityName][i].shopName
                  });
                }
              }
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {
 
        });
    }
  },
  components: {
    customHeader,
    hlwsk,
    ydzfsd,
    StoreDetails
  }
};
</script>
<style lang="scss" scoped>
@import "changeSettlementAccount";
</style>
